<template>
  <view class="container">
    <view class="login-box">
      <view class="title">请登录账号</view>

      <!-- 用户名输入框 -->
      <input v-model="username" placeholder="请输入用户名" class="input-box" />

      <!-- 密码输入框 -->
      <input v-model="password" type="password" placeholder="请输入密码" class="input-box" />

      <!-- 登录按钮 -->
      <button @click="login" class="login-button">登录</button>

      <!-- 错误提示 -->
      <view v-if="errorMsg" class="error-msg">{{ errorMsg }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '', // 用户输入的用户名
      password: '', // 用户输入的密码
      errorMsg: ''  // 错误信息提示
    };
  },
  methods: {
    // 模拟登录方法
    login() {
      const users = [
        { "username": "user1", "password": "pass1" },
        { "username": "admin", "password": "123456" }
      ]; // 将 data.json 中的内容作为对象定义在代码中

      const user = users.find(
          (u) => u.username === this.username && u.password === this.password
      );

      if (user) {
        uni.showToast({
          title: '登录成功',
          icon: 'success'
         });

        // 模拟存储 token
        uni.setStorageSync('userToken', 'login-success');

        // 登录成功后跳转到指定页面
        uni.navigateTo({
          url: '/pages/point/point'  // 跳转到指定页面，如首页
        });
      } else {
        this.errorMsg = '用户名或密码错误';
      }
    }
  }
};
</script>
<style>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.login-box {
  width: 80%;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  text-align: center;
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
}

.input-box {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
}

.login-button {
  background-color: #8DCB6D;
  color: white;
  border: none;
  border-radius: 25px;
  padding: 0px;
  margin-top: 10px;
  width: 100%;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-size: 16px;
}



.error-msg {
  color: red;
  margin-top: 10px;
}
</style>
